<template>
  <!-- 远程cascader组件 -->
  <el-cascader
    :options="Options"
    v-model="selected"
    v-loading="loading"
    :show-all-levels="showAllLevels"
    :filterable="true"
    :separator="separator"
    :props="props"
    :placeholder="placeholder"
    clearable
    @change="change"
    @blur="handleBlur"
    v-if="!plainText"
  >
  </el-cascader>
  <div v-else>
    <span >{{ optionObj[selected] }}</span>
  </div>
</template>

<script>
import emitter from "element-ui/src/mixins/emitter";
import lazy from "./lazy.mixin.js";
export default {
  mixins: [emitter,lazy],
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    allLevels: Boolean,//返回所有层级数据，默认只返回最后一项
    format: Function,//自定义格式化显示数据方法
    //el-cascader部分配置
    value:  String,
    options: Array,
    props: Object,
    size: String,
    plainText: Boolean, //仅回显文本
    placeholder: String,
    disabled: Boolean,
    clearable: Boolean,
    filterable: Boolean,
    filterMethod: Function,
    separator: {
      type: String,
      default: " / "
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    collapseTags: Boolean,
    debounce: {
      type: Number,
      default: 300
    },
    beforeFilter: {
      type: Function,
      default: () => () => {}
    },
    popperClass: String
  },
  data() {
    return {
      selected: "",
      loading: true,
      nomore: false,
      page: 1,
      Options: [],
      optionObj: {}
    };
  },
  mounted() {
    if (this.multiple) this.selected = [];
    //直接传入data，则可以不从远程获取数据
    this.initSelect(1)
  },
  methods: {
    change() {
      // console.log(this.selected);
      this.$emit(
        "change",
        !this.allLevels&& typeof this.selected !='string'
           ? this.selected[this.selected.length - 1]
          : this.selected
      );
    },
  }
};
</script>

<style lang="scss" scoped>
.tip {
  font-size: 10px;
  text-align: center;
  margin: 0;
  padding: 12px 0 8px 0;
  color: #999;
}
</style>
